// 导入路由控制组件
import { Test } from './pages/Test/Test.js';
import {Login} from './pages/Login/Login';
import {NotFound} from './pages/NotFound/NotFound';
import { GeekLayout } from './pages/GeekLatout/GeekLayout';
// 导入重定向组件
import { Redirect } from 'react-router-dom';
import './App.scss';
// 导入原生路由组件
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom'

import {isAuth} from '@/utils'
// 指定路由绑定组件方式
// 1:通过component
// 2:通过 render 返回一个函数,实现延迟调用,路由匹配的时候才会创建

// 配置路由规则
function App() {
  return (
    // 1:配置路由规则前提是组件包含在Router原生组件中
 <Router>
      <div className="App">
    {/* 2:使用Switch包裹路由控制组件实现路由导航 */}
    <Switch>
      {/* 匹配/时显示home组件 */}
      <Route exact path={'/'} render={()=><Redirect to={'/home'}></Redirect>}></Route>
    <Route path="/login" component={Login}></Route>
    <Route path="/test" render={(props)=>{
      
      if(isAuth()){
        return <Test></Test>
      }else {
        return <Redirect to={{
          pathname:'/login',
          state:{
            from:props.location.pathname
          }
        }}></Redirect>
      }
    }}></Route>
    {/* 设置路由规则:默认展示首页路由 */}
      {/* <Route path="/Home" component={GeekLayout}></Route> */}
      <Route path="/home" render={(props)=>{
        console.log('home组件的props',props);
        console.dir(props)
        // 判断当前token是否存在
        if (isAuth()){
          // 存在就渲染当前页面
          return <GeekLayout></GeekLayout>
        } else{
          // 不存在就返回登录页
          // return <Redirect to={'/login'}></Redirect>
          // 带走当前页面的路由参数作为标识,下次登录后直接返回
          return <Redirect to={{
            pathname:'/login',//退出的目标页面
            state:{
              // 重定向前的页面路由标识
              from:props.location.pathname
            }
          }}></Redirect>
        }
      }}></Route>
      <Route exact path="/" render={()=><Redirect to='/home'></Redirect>}></Route>
      <Route component={NotFound}></Route>
     

    </Switch>
    </div>
 </Router>
  );
}

export default App;
